<template>
  <div>
    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="套餐名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="套餐分类" prop="category.id">
          <el-select
            v-model="ruleForm.category_id"
            placeholder="请选择套餐分类"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="套餐价格" prop="price">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="套餐菜品" prop="disfloval">
          <div class="addBut">
            <el-button style="background: #ffc200; border: 0px" @click="addset"
              >+添加菜品</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="套餐图片" prop="image">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:5000/goods/uploader"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="ruleForm.image" :src="ruleForm.image" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="套餐描述" prop="description">
          <el-input type="textarea" v-model="ruleForm.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="adddish">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-dialog
        title="添加菜品"
        :visible.sync="dialogVisible"
        width="80%"
        :before-close="handleClose"
      >
        <el-transfer
          v-model="value"
          :data="data"
          :titles="['菜品', '已选菜品']"
          @left-check-change=getValue
        >
        </el-transfer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        name: "",
        category_id: "",
        price: "",
        image: "",
        description: "",
        cuser: "",
        u_user: "",
      },
      rules: {
        name: [{ required: true, message: "请填写菜品名称", trigger: "blur" }],
        category_id: [
          { required: true, message: "请选择菜品分类", trigger: "change" },
        ],
        price: [
          {
            type: "date",
            required: true,
            message: "请设置菜品价格",
            trigger: "change",
          },
        ],
        image: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      data: [],
      value: [],
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    this.ruleForm.cuser = localStorage.getItem("id");
    this.ruleForm.u_user = localStorage.getItem("id");
  },

  methods: {
    addset() {
      this.dialogVisible = true;
      this.getCai();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleAvatarSuccess(res, file) {
      this.ruleForm.image = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    adddish() {
      this.axios
        .post("/goods/dishM", this.ruleForm)
        .then((resp) => {
          console.log("resp", resp);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    getCai() {
      this.axios
        .get("/goods/dishM")
        .then((resp) => {
          console.log("成功", resp.data.list);
          for (var i = 0; i < resp.data.list.length; i++) {
            this.data.push({
              key: resp.data.list[i].id,
              label: resp.data.list[i].name,
            });
          }
        })
        .catch((err) => {
          console.log("失败", err);
        });
    },
    getValue(value,direction,movedKeys){
        this.value.push(direction[0])
    }
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped>
element.style {
  display: flex;
}

/* .flavorBox .addBut {
  background: #ffc200;
  display: inline-block;
  padding: 0px 20px;
  border-radius: 3px;
  line-height: 40px;
  cursor: pointer;
  border-radius: 4px;
  color: #333333;
  font-weight: 500;
} */

.flavorBox {
  width: 777px;
}

.flavorBox .flavor {
  border: solid 1px #dfe2e8;
  border-radius: 3px;
  padding: 15px;
  background: #fafafb;
}

.addBut {
  background: #ffc200;
  display: inline-block;
  padding: 0px 20px;
  border-radius: 3px;
  line-height: 40px;
  cursor: pointer;
  border-radius: 4px;
  color: #333333;
  font-weight: 500;
}

.flavorBox .flavor .cont .items .delFlavor {
  display: inline-block;
  padding: 0 10px;
  color: #f19c59;
  cursor: pointer;
}
.delBut {
  color: #f56c6c !important;
  position: relative;
}
.selectInput {
  position: relative;
  width: 100%;
  min-width: 100px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>